<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    {$LOAD_STYLE.top|raw}
</head>
<script src="__TPL_JS__/zepto.min.js"></script>
<script src="__TPL_JS__/zepto.weui.js"></script>
<script src="__JS__/clipboard.min.js"></script>

<style>
body{
	background-color: #EFEFEF;
}
.weui-panel_title{
	text-align: center;
	padding: 15px 10px;
	border-bottom: 1px solid #D6D6D6;
	margin-bottom: 8px;
}
.grid p{
	padding: 14px 10px;
	font-size: 18px;
	color: #575757;
	background-color: #FFFFFF;
	border:1px solid #E4E3E6;
	border-radius: 10px;
}
.grid .offbox{
	color: #575757;
	background-color: #F2F2F2;
	border:1px solid #E4E3E6;
}
.weui-grids:before{
	border: none;
}
.weui-media-box__title{
	color: #575757;
	margin-bottom:5px;
}
.weui-media-box__desc{
	line-height:1.6;
}
.offtitle .weui-media-box__title,.offtitle .weui-media-box__desc{
	color: #D1D1D1;
}
</style>
<body>
	<div class="weui-btn_primary weui-header "> 
		<h1 class="weui-header-title">面料参数查询</h1>
	</div>
	
	<div class="weui-tab" id="t1" style="height:auto;">
		<div class="weui-navbar">
			<div class="weui-navbar__item">
				编号列表
			</div>
			<div class="weui-navbar__item">
				产品列表
			</div>
			<div class="weui-navbar__item">
				快捷话术
			</div>
		</div>
	   <div class="weui-tab__panel">
			<div id="s0" class="weui-tab__content" style="opacity: 1; display: none;">
				{volist name="cloth" id="v"}
					<div class="weui-panel_title">【{$key}】开头</div>
					<div class="weui-grids grids-small">
						{volist name="v" id="c" }
							<a href="{:U('Fabric/info',array('id'=>$c['id'],'ssid'=>$uuid,'k'=>$token))}" class="grid">
								{if $c.status==1}
							    <p class="weui-grid__label">{$c.number}</p>
								{else/}
								<p class="weui-grid__label offbox">{$c.number}</p>
								{/if}
							</a>
						{/volist}
					</div>
				{/volist}
			</div>
			<div id="s1" class="weui-tab__content" style="display: block; opacity: 1;">
				{volist name="table" id="v"}
				<div class="weui-panel weui-panel_access" style="margin-bottom: 30px;">
					<div class="weui-panel__hd">{$key}</div>
					<div class="weui-panel__bd">
						{volist name="v" id="c" }
						<a href="{:U('Fabric/info',array('id'=>$c['id'],'ssid'=>$uuid,'k'=>$token))}">
							{if $c.status==1}
								<div role="option" class="weui-media-box weui-media-box_text">
									<strong class="weui-media-box__title">{$c.number} # {$c.title}</strong>
									<p class="weui-media-box__desc">幅宽：{$c.breadth}cm&nbsp;&nbsp;克重：{$c.square}g&nbsp;&nbsp;价格：￥{$c.price1|price}</p>
								</div>
							{else/}
								<div role="option" class="weui-media-box weui-media-box_text offtitle">
									<strong class="weui-media-box__title">(X) {$c.number} # {$c.title}</strong>
									<p class="weui-media-box__desc">幅宽：{$c.breadth}cm&nbsp;&nbsp;克重：{$c.square}g&nbsp;&nbsp;价格：￥{$c.price1|price}</p>
								</div>
							{/if}
						</a>
						{/volist}
					</div>
				</div>
				{/volist}
			</div>
			<div id="s2" class="weui-tab__content" style="display: block; opacity: 1;">
				{volist name="quick" id="v"}
				<div class="weui-panel weui-panel_access" style="margin-bottom: 30px;">
					<div class="weui-panel__hd">{$key}</div>
					<div class="weui-panel__bd">
						{volist name="v" id="c" }
						<a class="copybut" data-clipboard-text="{$c.content}">
							<div role="option" class="weui-media-box weui-media-box_text">
								<strong class="weui-media-box__title">{$c.name}</strong>
								<p class="weui-media-box__desc">{$c.content}</p>
							</div>
						</a>
						{/volist}
					</div>
				</div>
				{/volist}
			</div>
	  </div>
	</div>
	
</body>
{$LOAD_STYLE.bottom|raw}
<script type="text/javascript">
	$(function(){
		$('#t1').tab({
			defaultIndex: 0,
			activeClass: 'tab-green',
			onToggle: function (index) {
			console.log('index'+index);
			}
		})
	})
	
    resizebox();
    $(window).resize(function() {
        resizebox();
    });
    function resizebox(){
        var width=$(window).width();
        if(width>400){
            $('.hd').show();
        }else{
            $('.hd').hide();
        }
    }

    $(document).ready(function(){
        var clipboard = new ClipboardJS('.copybut');

        clipboard.on('success', function(e) {
			$.toast('复制成功！');
        });
        clipboard.on('error', function(e) {
			$.toast('复制成功！'+e.trigger, "cancel");
			
        });

    })
</script>
</html>